<script setup>
import { ref, computed, watch } from 'vue';
import moment from "moment";
import * as store from '@/store'
const data = ref([])
const time = ref(Date.now().toString());
const option = computed(() => {
  return {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        center: ['50%', '75%'],
        radius: '90%',
        min: 0,
        max: 1,
        splitNumber: 8,
        axisLine: {
          lineStyle: {
            width: 6,
            color: [
              [0.25, '#FF6E76'],
              [0.5, '#FDDD60'],
              [0.75, '#58D9F9'],
              [1, '#7CFFB2']
            ]
          }
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '12%',
          width: 20,
          offsetCenter: [0, '-60%'],
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          length: 12,
          lineStyle: {
            color: 'auto',
            width: 2
          }
        },
        splitLine: {
          length: 20,
          lineStyle: {
            color: 'auto',
            width: 5
          }
        },
        axisLabel: {
          color: '#464646',
          fontSize: 20,
          distance: -60,
          rotate: 'tangential',
          formatter: function (value) {
            if (value === 0.875) {
              return '屌爆了';
            } else if (value === 0.625) {
              return '优秀';
            } else if (value === 0.375) {
              return '正常';
            } else if (value === 0.125) {
              return '良好';
            }
            return '';
          }
        },
        title: {
          offsetCenter: [0, '-10%'],
          fontSize: 20
        },
        detail: {
          fontSize: 30,
          offsetCenter: [0, '-35%'],
          valueAnimation: true,
          formatter: function (value) {
            return Math.round(value * 100) + '';
          },
          color: 'inherit'
        },
        data: data.value
      }
    ]
  }
})
watch(() => store.default.state.sever2FrontData, (newVal, _) => {
  console.log(newVal);
  time.value = moment(newVal.Time).format('YYYY-MM-DD HH:mm:ss');
  data.value = [{
    value: newVal.Data,
    name: newVal.Title
  }];
})
const confirmEvent = () => {
  Tmm.Exit();
}
const alertEvent = () => {
  Tmm.test("同步牛逼");
}
const alertAsyncEvent = () => {
  Tmm.testAsync("异步牛逼", 1000).then((data) => {
    alert("异步回调" + data);
  })
}
</script>

<template>
  <div>
    <div class="app-bar">
      <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF"
        title="您确定要退出?" @confirm="confirmEvent">
        <template #reference>
          <div class="tools" @click="close">
            <el-icon size="28" color="#888">
              <SwitchButton />
            </el-icon>
          </div>
        </template>
      </el-popconfirm>
    </div>
    <e-charts class="chart" :option="option" />
    <el-button @click="alertEvent" type="success">同步发送数据给Winform</el-button>
    <el-button @click="alertAsyncEvent" type="danger">异步发送数据给Winform</el-button>
    <p>点击右键可以进入Dev调试模式</p>
    <p>当前时间：{{ time }}</p>
    <div class="end">甜蜜蜜出品 | 必属于精品 | 盗版必究</div>
    <div class="end1">Copy Right Tmm @2024</div>
  </div>
</template>

<style scoped>
.chart {
  width: 800px;
  height: 400px;
  margin: 0 auto;
}

.app-bar {
  width: 100%;
  height: 35px;
  box-shadow: 0 2px 4px #00000014;
  -webkit-app-region: drag;
  display: flex;
  justify-content: end;
  align-items: center;
}

.tools {
  width: 50px;
  height: 28px;
  line-height: 28px;
}

.end {
  position: fixed;
  bottom: 30px;
  width: 100%;
  margin: 0 auto;

}

.end1 {
  position: fixed;
  bottom: 10px;
  width: 100%;
  margin: 0 auto;
  font-size: 12px;
}
</style>
